import React, { useEffect, useState } from "react";
import Header from "@/components/Header";
import "./css/person.scss";
import {
  Input,
  Table,
  Button,
  TableColumnsType,
  Spin,
  Modal,
  Popconfirm,
  message,
} from "antd";
import { addData } from "./interface/interfaces";
import Zu from "./zuList/index";
import axios from "axios";
const { Search } = Input;
const onSearch = (value: string) => console.log(value);

export default function Blacklist() {
  const [openZu, setOpenZu] = useState(false); //租赁记录
  const [list, setList] = useState([]); //列表
  const [zuID, setZuID] = useState(0); //租赁ID
  const columns: TableColumnsType<addData> = [
    {
      title: "姓名",
      width: 100,
      dataIndex: "name",
      key: "id",
    },
    {
      title: "手机号",
      width: 100,
      dataIndex: "tell",
      key: "tell",
    },
    {
      title: "身份证号",
      dataIndex: "sfz",
      key: "sfz",
      width: 150,
    },
    {
      title: "注册时间",
      dataIndex: "createAt",
      key: "createAt",
      width: 150,
    },
    {
      title: "消费次数",
      dataIndex: "count",
      key: "count",
      width: 150,
    },

    {
      title: "操作",
      key: "operation",

      width: 150,
      render: (re) => {
        return (
          <div style={{ textAlign: "center" }}>
            <Button type="link" onClick={() => zuOpen(re.id)}>
              租赁记录
            </Button>
            <Popconfirm
              title="将该用户移除黑名单"
              description="是否要恢复？"
              okText="Yes"
              cancelText="No"
              onConfirm={() => removeList(re.id)}
            >
              {" "}
              <Button type="link">恢复</Button>
            </Popconfirm>

            <Button type="link">举报</Button>
          </div>
        );
      },
    },
  ];

  async function getList() {
    const { data } = await axios.get("http://127.0.0.1:3100/zsl/getBlackList");
    if (data.code === 200) {
      setList(data.data);
    }
  }
  useEffect(() => {
    getList();
  }, []);
  // 移除黑名单
  const removeList = async (id: number) => {
    const { data } = await axios.get(
      "http://127.0.0.1:3100/zsl/removeBlack?id=" + id
    );
    if (data.code === 200) {
      message.success(data.msg);
      getList();
    }
  };
  // 租赁框
  const zuOpen = (id: number) => {
    setZuID(id);
    setOpenZu(true);
  };
  return (
    <div className="storeBigBox">
      <Header title="个人客户" />
      <div className="searchBox">
        <div>
          <span
            style={{
              marginTop: "5px",
              display: "inline-block",
              marginRight: "5px",
            }}
          >
            客户姓名
          </span>
          <Search
            placeholder="请输入内容"
            onSearch={onSearch}
            style={{
              width: 200,
            }}
          />
        </div>
        <div style={{ marginLeft: "50PX" }}>
          <span
            style={{
              marginTop: "5px",
              display: "inline-block",
              marginRight: "5px",
            }}
          >
            手机号
          </span>
          <Search
            placeholder="请输入内容"
            onSearch={onSearch}
            style={{
              width: 200,
            }}
          />
        </div>
        <div style={{ marginLeft: "50PX" }}>
          <span
            style={{
              marginTop: "5px",
              display: "inline-block",
              marginRight: "5px",
            }}
          >
            身份证号
          </span>
          <Search
            placeholder="请输入内容"
            onSearch={onSearch}
            style={{
              width: 200,
            }}
          />
        </div>
      </div>
      <div style={{ position: "relative", top: "30px" }}>
        <Table
          pagination={{
            defaultPageSize: 3, //默认煤业显示条数
            defaultCurrent: 1, //默认当前页数第二页
            pageSizeOptions: ["3", "5", "10"], //每页显示多少条
            locale: {
              items_per_page: "条/页",
            },
          }}
          columns={columns}
          dataSource={list}
          scroll={{ y: 350 }}
        />
      </div>
      {/* 租赁框 */}
      <Modal
        title="租赁信息"
        open={openZu}
        onCancel={() => setOpenZu(false)}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        <Zu id={zuID} />
      </Modal>
    </div>
  );
}
